<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>会员注册</title>
  <link rel="stylesheet" href="./css/muse-ui.css">
  <link rel="stylesheet" href="./css/main.css" />
  <script src="./js/vue.js"></script>
  <script src="./js/axios.js"></script>
  <script src="./js/muse-ui.js"></script>
  <script src="./js/jsencrypt.min.js"></script>
  <style>
    .register {
      min-height: 100%;
      opacity: 0;
    }

    .register .mu-form-item {
      margin-bottom: 0px;
      min-height: 45px;
    }

    .submit-btn {
      background: #0af;
      color: #fff;
    }

    body {
      background: #fff;
    }

    .logo-class {
      display: block;
      width: 150px;
      margin: 50px auto 0px;
      text-align: center;
      margin-top: 30px;
      border-radius: 50%;
    }
  </style>
</head>

<body>
  <div id="app">
    <img src="logo.png" class="logo-class">
    <div class="register pd-top-10">
      <mu-form ref="form" :model="validateForm" class="login-content">
        <mu-form-item prop="username" :rules="usernameRules">
          <mu-text-field placeholder="请输入手机号" type="tel" v-model="validateForm.username" prop="username">
            <i @click="validateForm.username = ''" v-if="validateForm.username"
              class="iconfont colorfff fz-24">&#xe642;</i>
          </mu-text-field>
        </mu-form-item>

        <mu-form-item prop="smscode" :rules="smscodeRules">
          <div class="sms-code">
            <mu-text-field type="tel" placeholder="请输入验证码" v-model="validateForm.smscode" fullWidth />
            <mu-button flat class="sendcode" @click="getCode" :disabled="canSend">{{codeMsg}}</mu-button>
          </div>
        </mu-form-item>

        <mu-form-item>
          <mu-text-field placeholder="请输入邀请码" v-model="pmobile" :disabled="pmobile?true:false">
          </mu-text-field>
        </mu-form-item>

        <mu-form-item prop="password" :rules="passwordRules">
          <mu-text-field :type="visibility ? 'text' : 'password'" placeholder="请输入登录密码(6-20位字母+数字组合)"
            v-model="validateForm.password" prop="password">
            <i v-if="!visibility && validateForm.password.length>0" @click="() => (visibility = !visibility)"
              class="iconfont colorfff fz-24">&#xe630;</i>
            <i v-if="visibility" @click="() => (visibility = !visibility)" class="iconfont colorfff fz-24">&#xe6d6;</i>
          </mu-text-field>
        </mu-form-item>

        <mu-form-item prop="password2" :rules="password2Rules">
          <mu-text-field :type="visibility1 ? 'text' : 'password'" placeholder="请确认登录密码"
            v-model="validateForm.password2" prop="password2">
            <i v-if="!visibility1 && validateForm.password2.length>0" @click="() => (visibility1 = !visibility1)"
              class="iconfont colorfff fz-24">&#xe630;</i>
            <i v-if="visibility1" @click="() => (visibility1 = !visibility1)"
              class="iconfont colorfff fz-24">&#xe6d6;</i>
          </mu-text-field>
        </mu-form-item>

        <mu-form-item prop="trade" :rules="tradeRules">
          <mu-text-field :type="visibility ? 'text' : 'password'" placeholder="请输入交易密码(6位数字)"
            v-model="validateForm.trade" prop="trade">
            <i v-if="!visibility && validateForm.trade.length>0" @click="() => (visibility = !visibility)"
              class="iconfont colorfff fz-24">&#xe630;</i>
            <i v-if="visibility" @click="() => (visibility = !visibility)" class="iconfont colorfff fz-24">&#xe6d6;</i>
          </mu-text-field>
        </mu-form-item>

        <mu-form-item prop="trade2" :rules="trade2Rules">
          <mu-text-field :type="visibility1 ? 'text' : 'password'" placeholder="请输入交易密码" v-model="validateForm.trade2"
            prop="trade2">
            <i v-if="!visibility1 && validateForm.trade2.length>0" @click="() => (visibility1 = !visibility1)"
              class="iconfont colorfff fz-24">&#xe630;</i>
            <i v-if="visibility1" @click="() => (visibility1 = !visibility1)"
              class="iconfont colorfff fz-24">&#xe6d6;</i>
          </mu-text-field>
        </mu-form-item>
        <mu-form-item>
          <mu-button class="submit-btn" @click="submit">注册</mu-button>
        </mu-form-item>
        <mu-form-item>
          <mu-button class="submit-btn" @click="down">下载APP</mu-button>
        </mu-form-item>
      </mu-form>
    </div>
  </div>
</body>

<script>

  //api地址
  let url = 'https://apis.btcghh.com/'
  let vueInstance = new Vue({
    el: '#app',
    data() {
      return {
        usernameRules: [{
          validate: val => !!val,
          message: "请输入手机号"
        },
        {
          validate: val => (/^[1][3-9][0-9]{9}$/.test(val)),
          message: "请输入正确的手机号"
        }
        ],
        passwordRules: [{
          validate: val => (/^(?=.*\d)(?=.*[a-zA-Z]).{6,20}$/.test(val)),
          message: "6-20位字母+数组组合密码"
        }],
        password2Rules: [{
          validate: val => val == this.validateForm.password,
          message: "两次登录密码不一致"
        }],
        tradeRules: [{
          validate: val => (/^\d{6}$/.test(val)),
          message: "请输入6位交易密码"
        }],
        trade2Rules: [{
          validate: val => val == this.validateForm.trade,
          message: "两次交易密码不一致"
        }],
        smscodeRules: [{
          validate: val => !!val,
          message: "请输入验证码"
        }],
        validateForm: {
          username: "",
          password: "",
          password2: "",
          trade: "",
          trade2: "",
          smscode: "",
          nickname: ''
        },
        visibility: false,
        visibility1: false,
        visibility2: false,
        visibility3: false,

        codeMsg: '发送验证码',
        canSend: false,
        timer: null,
        startTime: null,
        time: 60, //倒计时60秒

        pid: '',
        pmobile: '',
      };
    },
    created() {
      //获取邀请码
      let url = window.location.href;
      let ret = url.split("=")[1];
      this.pmobile = ret; //截取pid
      setTimeout(() => {
        //隐藏vue加载过程显示的{{}}
        document.querySelector('.register').style.opacity = 1;
      }, 50)
      //刷新页面验证码倒计时继续
      if (localStorage.SMSCodeStratTime) {
        this.sended = true;
        this.startTime = localStorage.SMSCodeStratTime;
        this.sending();
      }
    },
    methods: {
      // 手机验证码
      getCode() {
        const formData = {
          type: '0',
          mobile: this.validateForm.username,
        }
        if (!(/^[1][3-9][0-9]{9}$/.test(this.validateForm.username))) {
          alert("请输入正确的手机号！");
          return
        } else {
          let data = {
            mobile: this.validateForm.username
          };
          //发送短信
          axios.post(url + '/Other/sendMns', data).then(res => {
            if (res.data.code == 0) {
              this.canSend = true;
              this.startTime = new Date().getTime();
              localStorage.setItem('SMSCodeStratTime', this.startTime);
              this.sending();
            }
            alert(res.data.msg)
          })
        }

      },
      sending() {
        //验证码倒计时
        let app = this;
        let now = new Date().getTime();
        let time = Math.round((now - app.startTime) / 1000);
        app.codeMsg = `请${app.time - time}秒后再试`
        if (time >= app.time) {
          app.canSend = false;
          app.startTime = null;
          app.timer = null;
          app.codeMsg = `获取验证码`
          localStorage.removeItem('SMSCodeStratTime')
        } else {
          app.timer = setTimeout(function () {
            app.sending();
          }, 1000)
        }
      },
      down() {
        axios.get(url + '/Other/version').then(res => {
          console.log(res.data);
          if (res.data.code === 0) {
            //注册成功跳转分发地址
            document.location.href = res.data.data.android;
          }
        })
      },
      submit() {
        //注册
        this.$refs.form.validate().then(result => {
          if (result) {
            const formData = {
              mobile: this.validateForm.username,
              password: this.validateForm.password,
              trade: this.validateForm.trade,
              code: this.validateForm.smscode,
              invite: this.pmobile,
            };
            axios.post(url + '/User/register', formData).then(res => {
              alert(res.data.msg);
              console.log(res.data.data);
              if (res.data.code === 0) {
                //注册成功跳转分发地址
                document.location.href = res.data.data.register;
              }
            })
          }
        });
      }
    },
  })
</script>
<script>
  //alert 弹出框样重写样式
  window.alert = function (msg, callback) {
    var div = document.createElement("div");
    div.innerHTML = "<style type=\"text/css\">" +
      ".nbaMask { position: fixed; z-index: 1000; top: 0; right: 0; left: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); }                                                                                                                                                                       " +
      ".nbaMaskTransparent { position: fixed; z-index: 1000; top: 0; right: 0; left: 0; bottom: 0; }                                                                                                                                                                                            " +
      ".nbaDialog { position: fixed; z-index: 5000; width: 80%; max-width: 300px; top: 40%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: #fff; text-align: center; border-radius: 8px; overflow: hidden; opacity: 1; color: white; }" +
      ".nbaDialog .nbaDialogHd { padding: .2rem .27rem .08rem .27rem; }                                                                                                                                                                                                                         " +
      ".nbaDialog .nbaDialogHd .nbaDialogTitle { font-size: 17px; font-weight: 400; }                                                                                                                                                                                                           " +
      ".nbaDialog .nbaDialogBd { padding: 20px .27rem;color: #D94600; font-size: 15px; line-height: 1.3; word-wrap: break-word; word-break: break-all; }                                                                                                                                          " +
      ".nbaDialog .nbaDialogFt { position: relative; line-height: 48px; font-size: 17px; display: -webkit-box; display: -webkit-flex; display: flex; }                                                                                                                                          " +
      ".nbaDialog .nbaDialogFt:after { content: \" \"; position: absolute; left: 0; top: 0; right: 0; height: 1px; border-top: 1px solid #e6e6e6; color: #e6e6e6; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); }               " +
      ".nbaDialog .nbaDialogBtn { display: block; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; color: #30362a; text-decoration: none; -webkit-tap-highlight-color: transparent; position: relative; margin-bottom: 0; }                                                                       " +
      ".nbaDialog .nbaDialogBtn:after { content: \" \"; position: absolute; left: 0; top: 0; width: 1px; bottom: 0; border-left: 1px solid #e6e6e6; color: #e6e6e6; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleX(0.5); transform: scaleX(0.5); }             " +
      "</style>" +
      "<div id=\"dialogs2\" style=\"display: none\">" +
      "<div class=\"nbaMask\"></div>" +
      "<div class=\"nbaDialog\">" +
      "	<div class=\"nbaDialogHd\">" +
      "		<strong class=\"nbaDialogTitle\"></strong>" +
      "	</div>" +
      "	<div class=\"nbaDialogBd\" id=\"dialog_msg2\">弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内</div>" +
      "	<div class=\"nbaDialogHd\">" +
      "		<strong class=\"nbaDialogTitle\"></strong>" +
      "	</div>" +
      "	<div class=\"nbaDialogFt\" id=\"dialog_ok2\">" +
      "		<p href=\"javascript:;\" class=\"nbaDialogBtn nbaDialogBtnPrimary\">确定</p>" +
      "	</div></div></div>";
    document.body.appendChild(div);

    var dialogs2 = document.getElementById("dialogs2");
    dialogs2.style.display = 'block';

    var dialog_msg2 = document.getElementById("dialog_msg2");
    dialog_msg2.innerHTML = msg;

    var dialog_ok2 = document.getElementById("dialog_ok2");
    dialog_ok2.onclick = function () {
      dialogs2.style.display = 'none';
    };
  };
</script>

</html>